import './index.scss'
import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'
import { useWindowDimensions } from '@/hook'

const WatchAnimeSkeleton = () => {
  const { width, height } = useWindowDimensions()

  return (
    <div className="anime-skeleton">
      <Skeleton
        baseColor={'#eee'}
        highlightColor={'#fff'}
        style={{
          marginBottom: '1rem',
          borderRadius: '10px',
          aspectRatio: width <= 600 ? '16 / 11' : '16 / 9',
        }}
      />

      {/* <div className="episodes-wrapper">
        <div className="episodes-title">
          <h4>选集播放</h4>
        </div>
        <div className="episodes">
          {[...Array(12)].map((x, i) => (
            <div key={i}>
              <Skeleton
                width={'3rem'}
                height={45}
                borderRadius={'0.4rem'}
                baseColor={'#eee'}
                highlightColor={'#fff'}
              />
            </div>
          ))}
        </div>
      </div> */}
    </div>
  )
}

export default WatchAnimeSkeleton
